<template>
    <div class="console-page home_index">
        <el-scrollbar>
            <div class="guide-title">欢迎访问松不渝Maven仓库</div>
            <el-table :data="repositoryData" border header-cell-class-name="el-table-header-cell"
                cell-class-name="el-table-cell" class="e-page" ref="tableRef">
                <el-table-column prop="name" label="仓库名称" min-width="200px" />
                <el-table-column prop="url" label="仓库地址" min-width="400px" />
                <el-table-column prop="name" label="仓库概况" min-width="400px">
                    <template #default="scope">
                        <span class="desc">
                            <span>仓库类型：</span>
                            <span>{{ scope.row.maven?.versionPolicy.toLowerCase() || 'release' }}</span>
                        </span>
                        <span v-if="scope.row.proxy" class="desc">
                            <span>源地址：</span>
                            <span>{{ scope.row.proxy?.remoteUrl }}</span>
                        </span>
                        <span v-if="scope.row.group" class="desc">
                            <span>包含仓库：</span>
                            <span>{{ scope.row.group?.memberNames.join(",") }}</span>
                        </span>

                    </template>
                </el-table-column>
            </el-table>

            <div class="guide-title">Maven配置</div>
            <div>
                <span>打开 maven 的配置文件</span><span class="inline-code bold">settings.xml</span><span>，在</span>
                <span class="inline-code bold">&lt;mirrors&gt;&lt;/mirrors&gt;</span>
                <span>标签中添加 mirror 子节点， 配置全局仓库地址:</span>
            </div>
            <div class="code-content">
                <pre id="mirror"><code v-html="mirror" /></pre>
                <div class="copy-dom cursor-pointer" @click="copy('mirror')">复制</div>
            </div>
            <div>
                <span>如果想使用其它代理仓库，可在</span>
                <span class="inline-code bold">pom.xml</span>
                <span>的</span>
                <span class="inline-code bold">&lt;repositories&gt;&lt;/repositories&gt;</span>
                <span>节点中加入对应的仓库地址。以 central代理仓为例：</span>
            </div>
            <div class="code-content">
                <pre id="o-mirror"><code v-html="repositories" /></pre>
                <div class="copy-dom cursor-pointer" @click="copy('o-mirror')">复制</div>
            </div>
            <div class="guide-title">引用依赖</div>
            <div>
                <span>在你的 pom.xml 文件</span>
                <span class="inline-code bold">&lt;denpendencies&gt;&lt;/denpendencies&gt;</span>
                <span>节点中加入你要引用的文件信息：</span>
            </div>
            <div class="code-content">
                <pre id="refer"><code v-html="denpendency" /></pre>
                <div class="copy-dom cursor-pointer" @click="copy('refer')">复制</div>
            </div>
            <div>执行拉取命令：</div>
            <div class="code-content">
                <pre id="install"><code>mvn install</code></pre>
                <div class="copy-dom cursor-pointer" @click="copy('install')">复制</div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup>
import { useRequest, useCopyText } from "@usehook"
let repositoryData = ref([])

useRequest("/mvn/repositories").then(resp => {
    if (resp && resp.status) {
        repositoryData.value = resp.data
    }
})

const copy = (dom_id) => {
    useCopyText(document.querySelector("#" + dom_id).innerText)
}

const mirror = `<span>&lt;<span class="label">mirror</span>&gt;</span>
    <span>&lt;<span class="label">id</span>&gt;</span>dansj<span>&lt;/<span class="label">id</span>&gt;</span>
    <span>&lt;<span class="label">mirrorOf</span>&gt;</span>*<span>&lt;/<span class="label">mirrorOf</span>&gt;</span>
    <span>&lt;<span class="label">name</span>&gt;</span>dansj public maven<span>&lt;/<span class="label">name</span>&gt;</span>
    <span>&lt;<span class="label">url</span>&gt;</span>https://mvn.dansj.cn/repository/maven-public<span>&lt;/<span class="label">url</span>&gt;</span>
<span>&lt;/<span class="label">mirror</span>&gt;</span>`

const repositories = `<span>&lt;<span class="label">repository</span>&gt;</span>
    <span>&lt;<span class="label">id</span>&gt;</span>central<span>&lt;/<span class="label">id</span>&gt;</span>
    <span>&lt;<span class="label">url</span>&gt;</span>https://mvn.dansj.cn/repository/maven-central<span>&lt;/<span class="label">url</span>&gt;</span>
    <span>&lt;<span class="label">releases</span>&gt;</span>
        <span>&lt;<span class="label">enabled</span>&gt;</span>true<span>&lt;/<span class="label">enabled</span>&gt;</span>
    <span>&lt;/<span class="label">releases</span>&gt;</span>
    <span>&lt;<span class="label">snapshots</span>&gt;</span>
        <span>&lt;<span class="label">enabled</span>&gt;</span>true<span>&lt;/<span class="label">enabled</span>&gt;</span>
    <span>&lt;/<span class="label">snapshots</span>&gt;</span>
<span>&lt;/<span class="label">repository</span>&gt;</span>`

const denpendency = `<span>&lt;<span class="label">dependency</span>&gt;</span>
    <span>&lt;<span class="label">groupId</span>&gt;</span>[group_id]<span>&lt;/<span class="label">groupId</span>&gt;</span>
    <span>&lt;<span class="label">artifactId</span>&gt;</span>[artifact_id]<span>&lt;/<span class="label">artifactId</span>&gt;</span>
    <span>&lt;<span class="label">version</span>&gt;</span>[version]<span>&lt;/<span class="label">version</span>&gt;</span>
<span>&lt;/<span class="label">dependency</span>&gt;</span>`
</script>

<style lang="scss">
.home_index {
    padding: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);

    .desc+.desc {
        padding-left: 10px;
    }

    .guide-title {
        font-size: 20px;
        padding: 20px 0;
        color: rgb(160 140 10);
    }

    .inline-code {
        padding: 2px 4px;
        font-size: 16px;
        color: #c7254e;
        background-color: #f9f2f4;
        border-radius: 4px;
        margin: 0 5px;
    }

    .bold {
        font-weight: bold;
    }

    code {
        font-family: font2, source-code-pro, SF Mono, Segoe UI Mono, Roboto Mono, Ubuntu Mono, Menlo, Courier, monospace;
        display: block;
        padding: 10px;
    }

    .label {
        color: rgb(224, 108, 117);
    }

    .el-scrollbar__bar.is-vertical {
        width: 0;
    }

    pre+.guide-title {
        padding-top: 0;
    }

    pre {
        margin: 20px;
        color: rgb(171, 178, 191);
        background: rgb(40, 44, 52);
    }

    .guide-title:nth-of-type(1) {
        padding-top: 0;
    }

    .code-content {
        position: relative;
    }

    .copy-dom {
        position: absolute;
        right: 25px;
        top: 5px;
        background: white;
        font-size: 14px;
        padding: 2px 5px;
        border-radius: 2px;
        opacity: 0;
        transition: opacity .5s;
    }

    .code-content:hover .copy-dom {
        opacity: 1;
        transition: opacity .5s;
    }
}
</style>